El uso de parámetros en funciones permite reducir el número de funciones que escribimos en el código,puesto que configuramos de forma variable el trabajo a realizar por la función.
Por ejemplo, si necesitamos 4 botones que muestren cada uno de ellos un mensaje diferente en pantalla, podemos usar una sola función para los cuatro botones, modificando en cada caso el mensaje a mostrar. Esto se consigue añadiendo un parámetro en la declaración de la función, y estableciendo el valor de de ese parámetro en cada llamada en los botones.
El parámetro, en la declaración, no deja de ser más que una variable cuyo ámbito de acción se reduce a la propia función que estamos definiendo. Lo que estamos haciendo en ese proceso es indicarle a la función que va a recibir un dato cuando sea llamada, y eso lo hacemos escribiendo un nombre de parámetro en los paréntesis de la función. Y a continuación, en las instrucciones dentro de la función, definimos lo que tiene que hacer con ese dato recibido.
En la llamada a la función, en cambio, lo que ponemos entre paréntesis es el valor que asignamos al dato que espera recibir la función. En ese caso el dato toma el nombre de argumento. De forma que cuando el código ejecute la función, reemplazará el nombre del parámetro de la función por el argumento recibido en su llamada.
Por lo tanto cuando declaramos la función haremos: function nombreFuncion(parámetro) {haz algo con ese parámetro}
Y cuando la llamemos será así: nombreFuncion(argumento);
Una cosa a tener en cuenta es que si la función espera recibir un parámetro en su declaración, necesita recibir un argumento en su llamada, de lo contrario podríamos encontrar un error. En caso de que una función pueda trabajar tanto con como sin parámetro, tendremos que contemplarlo de alguna forma en el código para evitar que provoque un error.
Veamos un ejemplo para mostrar 4 mensajes diferentes con una misma función asignada a 4 botones, contemplando el que la función pueda no recibir el parámetro necesario:
El código de la función es este:
function muestraMensaje(dato) {
if (dato == undefined) {
dato = 'No hay mensaje';
}
alert(dato);
}
Y en cada botón la llamada a la función incorpora el texto que debe mostrar el alert:
<button onclick="muestraMensaje('Hola!')">Mensaje</button>
<button onclick="muestraMensaje('Adiós!')">Mensaje</button>
<button onclick="muestraMensaje('Empezamos con el uso de parámetros en funciones. Al principio cuesta un poco de enteder')">Mensaje</button>
<button onclick="muestraMensaje()">Mensaje</button>
Un ejemplo similar para cambiar el color de fondo del documento
La función será:
function cambiaColor(color_fondo) {
document.body.style.backgroundColor = color_fondo;
}
Donde el parámetro que definimos espera recibir un valor de color compatible con la propiedad background-color. Y eso hacemos en las llamadas a la función en los botones. Cualquier valor compatible con esa propiedad es admitido como argumento:
<button onclick="cambiaColor('red')">Cambia a Rojo</button>
<button onclick="cambiaColor('rgb(0,0,255)')">Cambia a Azul</button>
<button onclick="cambiaColor('#00FF00')">Cambia a Verde</button>
<button onclick="cambiaColor('yellow')">Cambia a Amarillo</button>
Los parámetros pueden recibir datos de cualquier tipo que sea compatible con los tipos de datos de las variables. Lo importante no es tanto el tipo de datos a usar, sino lo que se espera que haga la función con esos datos. Por ejemplo, si la función tiene que realizar algún tipo de cálculo con el parámetro recibido este tendrá que ser de tipo numérico, o de lo contrario tendremos un error de tipo de datos, de la misma forma que lo obtenemos cuando intentamos calcular con una variable no numérica.
En este caso obtenemos el cuadrado del número pasado como parámetro:
Para que pueda realizar bien el cálculo, es necesario que los datos pasado sean numéricos:
function calculaCuadrado(num) {
alert('El cuadrado de ' + num + ' es ' + (num * num));
}
<button onclick="calculaCuadrado(2)">Cuadrado de 2</button>
<button onclick="calculaCuadrado(8)">Cuadrado de 8</button>
<button onclick="calculaCuadrado(200)">Cuadrado de 200</button>
<button onclick="calculaCuadrado(1000)">Cuadrado de 1000</button>
También podemos incluir más de un parámetro en la declaración de la función, separándolos por comas dentro de los paréntesis. Aquí será fundamental, cuando hagamos la llamada a la función con los valores correspondientes, escribirlos en el orden correcto en que los espera al función. Por ejemplo, si hacemos una función para cambiar el mensaje de un titular, y al mismo tiempo definir su color, es necesario que al llamar a la función pongamos el mensaje y el color dentro de los paréntesis en su orden correcto, de lo contrario tendremos un error
function cambiaTitular(titulo, color) {
let titular = document.getElementById('titular');
titular.textContent = titulo;
titular.style.color = color;
}
<button onclick="cambiaTitular('Estamos con JS','darkred')">Titular 1</button>
<button onclick="cambiaTitular('Viendo el uso de parámetros','darkblue')">Titular 2</button>
<button onclick="cambiaTitular('Son como variables dentro de una función','darkgreen')">Titular 3</button>
<button onclick="cambiaTitular('Otro titular para la función', '#FF00FF')">Titular 4</button>
Dentro de los lenguajes orientados a objetos tenemos un término para hacer referencia de forma directa al objeto con el que estamos trabajando en el código. En JavaScript este término es la palabra this. Por ejemplo, en cualquier función declarada en el script del documento, el uso de esa palabra hará referencia al objeto window, que es el objeto que contiene el código. Cuando trabajamos con eventos, asociando una función a un evento determinado de un objeto (un párrafo, un botón, un div...) el uso de la palabra this en el evento hace referencia al objeto que lanza el evento.
Esto nos permite acceder de forma inmediata desde el código de una función al objeto que llama a esa función (por ejemplo con el evento onclick) para trabajar con las propiedades de ese objeto, simplificando mucho el trabajo con esos objetos.
En este ejemplo, además de pasar el nombre de la película sobre al que votamos en el parámetro, pasamos un segundo dato, que es el propio botón sobre el que hacemos clic, para desactivarlo, y cambiar su color de fondo con un valor que recibe la función como tercer parámetro:
function votaThis(titulo, boton, color) {
document.getElementById('resultado').textContent = 'La película ganadora es ' + titulo;
boton.style.backgroundColor = color;
boton.disabled = true;
}
Lo interesante aquí es que el parámetro boton es un objeto, no un id que tenga que usar para acceder al objeto. Directamente es el objeto y por lo tanto ya tenemos disponibles todas sus propiedades (cambio de color, disabled...). Y en la llamada a la función lo incluimos usando la palabra this. Eso le indica al documento que al hacer clic sobre él lo incluya como dato de la función.
<button onclick="votaThis('Airbag' , this, 'red')">Peli 1</button>
<button onclick="votaThis('Black Mirror' , this, 'blue')">Peli 2</button>
<button onclick="votaThis('Casablanca' , this, 'lime')">Peli 3</button>
<button onclick="votaThis('Dia D' , this, 'orange')">Peli 4</button>
Usar todo el objeto como parámetro nos proporciona más flexibilidad a la hora de acceder a datos y propiedades desde la función asociada al evento. Hayq ue recordar que un objeto es más que su referencia en el código vía id, es todo el conjunto de propiedades y métodos que lo constituyen. Así, el ejemplo anterior se puede simplificar usando la propiedad textContent del botón, y reduciendo el número de parámetros de la función:
function votaMas(elemento) {
elemento.disabled = true;
let titulo = elemento.textContent;
document.getElementById('result2').textContent = titulo;
}
<button onclick="votaMas(this)">El piano</button>
<button onclick="votaMas(this)">La costilla de Adán</button>
<button onclick="votaMas(this)">Into the wild</button>
<button onclick="votaMas(this)">Soy leyenda</button>
Los atributos data- de las etiquetas HTML funcionan como variables o contenedores de datos dentro del mismo objeto, y puedes ser definidos directamente desde el documento HTML, para ser usados posteriormente en un script. El nombre de los atributos siempre empieza por la raíz data- y va seguido del nombre de "variable", por ejemplo data-color, y a continuación, seguido del signo = y unas comillas (como todos los atributos HTML) asginamos su valor.
Aunque son atributos HTML, su verdadero valor está en su uso en JavaScript, puesto que desde este lenguaje podemos leer y usar esos datos en el script, además de modificarlos en el documento HTML.
En el ejemplo anterior, vamos ahora a almacenar en cada botón un atributo con el color que queremos aplicar al botón cuando pulsemos sobre él.
La forma de acceder a a los atributos data desde el script es usando la propiedad dataset del elemento que contiene el atributo, seguida del nombre del data que viene después del guión. Por ejemplo, boton.dataset.color. Esta propiedad es de lectura y escritura, por lo que podremos modificar el valor de uno de estos atributos usando la misma sintaxis.
function votaData(elemento) {
let color_fondo = elemento.dataset.color;
elemento.style.color = color_fondo;
document.getElementById('result3').textContent = elemento.textContent;
elemento.disabled = true;
}
<button onclick="votaData(this)" data-color="darkred">El piano</button>
<button onclick="votaData(this)" data-color="lime">La costilla de Adán</button>
<button onclick="votaData(this)" data-color="darkorange">Into the wild</button>
<button onclick="votaData(this)" data-color="darkgoldenrod">Soy leyenda</button>
function votaTodo(boton) {
let nombre_peli = boton.dataset.titulo;
let cantidad_votos = boton.dataset.votos;
cantidad_votos = parseInt(cantidad_votos);
cantidad_votos++;
boton.dataset.votos = cantidad_votos;
document.getElementById('titulo_peli').textContent = nombre_peli;
document.getElementById('numero_votos').textContent = cantidad_votos;
}